<template>
  <div class="overlay-page">
    <div class="visual-layout no-background-image not-grid">
      <div class="visual-layout-head flex align-center position-relative">
        <el-button class="home-button" type="primary" icon="el-icon-house" circle @click="toHome"></el-button>
        <img class="title-img" src="../../assets/title-img.png" alt="智慧能源信息平台">
        <button ref="fullscreen" style="opacity: 0;" @click="makeFullscreen"></button>
        <global-filter @comparison="onComparison"></global-filter>
      </div>
      <div class="visual-layout-middle">
        <div class="item-content">
          <monitor-statistics></monitor-statistics>
          <map-center></map-center>
        </div>
      </div>
      <div class="visual-layout-left">
        <analysis-of-energy-consumption-structure></analysis-of-energy-consumption-structure>
        <comprehensive-analysis-of-key-indicators></comprehensive-analysis-of-key-indicators>
        <focus-on-enterprises></focus-on-enterprises>
      </div>
      <div class="visual-layout-right">
        <trend-of-output-index></trend-of-output-index>
        <multidimensional-comprehensive-analysis></multidimensional-comprehensive-analysis>
        <energy-using-enterprise></energy-using-enterprise>
      </div>
      <div class="visual-layout-bottom">
        <real-time-data-viewing></real-time-data-viewing>
      </div>
    </div>

    <comparison-dialog ref="comparison" :title="comparisonTitle" :filter="filter"></comparison-dialog>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/style/variable";
$color-1: #3662a9;
$color-2: #3b71c8;
$color-3: #aac4ee;
$item-background: rgba(0,0,0,0.25);

$width-layout-left: 360px;
$width-layout-right: 360px;
$height-layout-head: 65px;

.visual-layout {
  padding: 0;
  min-width: 1440px;
  ::v-deep .item-head {
    padding: 8px $gutter;
    color: $color-2;
    border-radius: 6px;
    background: linear-gradient(to right, transparent 60%, rgba(#022142, .1));
  }
  ::v-deep .secondary-title,
  ::v-deep .primary-title {
    margin: 0;
  }
  ::v-deep .item-icon {
    font-size: 2.4rem;
    margin-right: 5px;
    opacity: .6;
    order: 2;
    margin-left: auto;
    align-self: flex-start;
    display: none;
  }
  ::v-deep .primary-title {
    line-height: 1.8;
    color: #ffffff;
    font-weight: normal;
  }
  ::v-deep .secondary-title {
    color: $color-1;
    display: none;
  }
}
.visual-layout-head {
  height: $height-layout-head;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 111;
}
.visual-layout .visual-layout-head:after {
  background-size: auto auto;
  width: 1920px;
  height: 87px;
}
.visual-layout-left,
.visual-layout-right {
  position: absolute;
  top: 88px;
  bottom: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  ::v-deep .item-content:not(.no-padding) {
    padding: $gutter;
  }
}
.visual-layout-left {
  left: 0;
  width: $width-layout-left;
}
.visual-layout-right {
  right: 0;
  width: $width-layout-right;
}
.visual-layout-bottom {
  position: absolute;
  left: $width-layout-left + 20px;
  right: $width-layout-right + 20px;
  bottom: 0;
}
.visual-layout-middle {
  width: 100%;
  height: 100%;

  .global-filter {
    padding: 20px;
  }
  .item-content {
    height: 100%;
  }
  ::v-deep .monitor-statistics {
    border: 1px solid currentColor;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: absolute;
    left: $width-layout-left + 20px;
    top: $height-layout-head + 40px;
    z-index: 11;
    text-align: center;
    .monitor-item {
      padding: 0 1rem;
      border-left: 1px solid currentColor;
      &:first-child {
        border-left: 0;
      }
    }
    .number {
      margin-top: -5px;
      font-size: 1.2rem;
      font-weight: 600;
      color: #02ffff;
    }
  }
}
.home-button {
  position: relative;
  z-index: 999;
}
</style>

<script>
import AnalysisOfEnergyConsumptionStructure
  from './components/analysis-of-energy-consumption-structure.vue'
import ComprehensiveAnalysisOfKeyIndicators
  from './components/comprehensive-analysis-of-key-indicators.vue'
import TrendOfOutputIndex from './components/trend-of-output-index.vue'
import FocusOnEnterprises from './components/focus-on-enterprises.vue'
import RealTimeDataViewing from './components/real-time-data-viewing.vue'
import { getFirstMenuPath } from '@/router'
import GlobalFilter from './components/Global-filter.vue'
import MultidimensionalComprehensiveAnalysis
  from './components/multidimensional-comprehensive-analysis.vue'
import EnergyUsingEnterprise from './components/energy-using-enterprise.vue'
import MapCenter from './components/map-center/index.vue'
import ComparisonDialog from './components/comparison-dialog.vue'
import MonitorStatistics from './components/monitor-statistics.vue'
import fullscreen from 'fullscreen.js'

export default {
  name: 'VisualScreen',
  components: {
    MonitorStatistics,
    ComparisonDialog,
    MapCenter,
    EnergyUsingEnterprise,
    MultidimensionalComprehensiveAnalysis,
    GlobalFilter,
    RealTimeDataViewing,
    FocusOnEnterprises,
    TrendOfOutputIndex,
    ComprehensiveAnalysisOfKeyIndicators,
    AnalysisOfEnergyConsumptionStructure,
  },
  provide: {
    colors: [
      '#ff4500',
      '#ff8c00',
      '#ffd700',
      '#90ee90',
      '#00ced1',
      '#1e90ff',
      '#c71585',
    ]
  },
  data () {
    return {
      comparisonTitle: undefined,
      filter: undefined,
      visible: false,
    }
  },
  computed: {
    permissionRoutes () {
      return this.$store.state.user.permissionRoutes || []
    },
    firstPath () {
      const routes = this.permissionRoutes
      const route = routes[0]
      if (route) {
        return getFirstMenuPath(route)
      }
      return '/login'
    },
  },
  mounted () {
    if (process.env.NODE_ENV === 'production') {
      this.$refs.fullscreen.click()
    }
  },
  methods: {
    toHome () {
      const routes = this.permissionRoutes
      const route = routes[1]
      try {
        this.$router.push({
          name: route.children[0].name
        })
      } catch (e) {}
    },
    makeFullscreen () {
      const enabled = fullscreen.enabled()
      if (enabled) {
        try {
          fullscreen.request()
        } catch (e) {}
      }
    },
    onComparison (filter) {
      this.filter = filter
      this.comparisonTitle = filter.names.join('、') + '实时数据对比'
      this.$nextTick(() => {
        this.$refs.comparison.open()
      })
    },
  }
}
</script>
